<template>
	<!-- 首页 分段器1-->
	<view>
		<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
			activeColor="#4cd964"></uni-segmented-control>
		<view class="content">
			<view v-show="current === 0">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
					<uni-card v-for="(item,index) in showingList" style="margin: 5px;padding: 0;width: 140px;"
						class="scroll-view-item_H uni-bg-red" :key="index">
						<view>
							<image mode="heightFix" style="width: 120px;height: 120px;cursor: pointer;"
								:src="item.movieImage" @click="toMovieDetail(item.movieId)"></image>
							<view>{{item.movieName}}</view>
							<button class="button-round" size="mini" @click="toMovieBuyList()">购票</button>
						</view>
					</uni-card>
				</scroll-view>
			</view>
			<view v-show="current === 1">
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
					<uni-card v-for="(item,index) in comingList" style="margin: 5px;padding: 0;width: 140px;"
						class="scroll-view-item_H uni-bg-red" :key="index">
						<view>
							<image mode="heightFix" style="width: 120px;height: 120px;cursor: pointer;"
								:src="item.movieImage" @click="toMovieDetail(item.movieId)"></image>
							<view>{{item.movieName}}</view>
							<button class="button-round" size="mini" style="background-color: #aa55ff;">预售</button>
						</view>
					</uni-card>
				</scroll-view>
			</view>
			<view v-show="current === 2">
				选项卡3的内容
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import api from '../api/api'
	import {
		ref,
		onMounted
	} from 'vue'
	const items = ref(['正在热映', '即将上映', '更多'])
	const current = ref(0)
	const showingList = ref()
	const comingList = ref()
	const onClickItem = (e) => {
		current.value = e.currentIndex
		if(current.value ==2){
			uni.reLaunch({
				url:'/pages/film/films/films'
			})
		}
	}
	onMounted(() => {
		getShowingMovieList()
		getComingMovieList()
	})
	const getShowingMovieList = () => {
		api.movie.getShowingMovieList().then(res => {
			if (res.data.code == 0) {
				showingList.value = res.data.data.list
			}
		})
	}
	const getComingMovieList = () => {
		api.movie.getComingMovieList().then(res => {
			if (res.data.code == 0) {
				comingList.value = res.data.data.list
			}
		})
	}
	const toMovieDetail = (id:any) => {
		uni.navigateTo({
			url: '/pages/film/films/filmDetail?movieId='+id
		})
	}
	const toMovieBuyList = ()=>{
		uni.navigateTo({
			url:'/pages/film/films/filmBuyList'
		})
	}
</script>

<style scoped>
	.button-round {
		border-radius: 20px;
		color: aliceblue;
		font-size: 15px;
		background-color: #ff557f;
	}

	.scroll-view_H {
		white-space: nowrap;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 35%;
		height: 200px;
		line-height: 150px;
		font-size: 36px;
	}
</style>
